<template>
  <el-card shadow="always" >
    <!---- -- -- -- 头部-- -- -- -- -- -- -->
    <div slot="header">
      <!-- 路径导航 -->
       <Breadcrumb/>
    </div>
    <!---- -- -- -- 内容区域-- -- -- -- -- -- -->
    <!-- 筛选区域 -->
    <div class="filter-box">
      <div class="lt">
        <el-input placeholder="请输入内容" clearable @clear="submitGetList" v-model="keywords" size="small">
            <el-button slot="append" icon="el-icon-search" @click="submitGetList"></el-button>
        </el-input>
      </div>
      <div class="rt">
        <el-button type="primary" @click="$router.push('/goods/add')"  size="small" icon="el-icon-plus">增加</el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="table-box">
      <!-- 表格 -->
      <!-- data属性表示表格的数据 -->
      <el-table :data="list" border >
        <!-- 列信息 type表示列的类型，index表示序号列 selection选择列 -->
        <el-table-column align="center" type="index"  label="#" fixed="left"></el-table-column>
        <el-table-column align="center" label="ID" prop="goods_id"></el-table-column>
        <el-table-column align="center" label="商品名称" prop="goods_name" width="530px"></el-table-column>
        <el-table-column align="center" label="价格" prop="goods_price" width="120px"></el-table-column>
        <el-table-column align="center" label="数量" prop="goods_number" width="120px"></el-table-column>
        <el-table-column align="center" label="状态"  width="120px">
          <template slot-scope="scope">
             <el-tag type="info" size="small" v-if="scope.row.goods_state==0" >未通过</el-tag>
             <el-tag type="warning" size="small" v-if="scope.row.goods_state==1" >审核中</el-tag>
             <el-tag type="success" size="small" v-if="scope.row.goods_state==2" >已审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否热销"  width="120px">
          <template slot-scope="scope">
             <el-tag type="success" size="small" v-if="scope.row.is_promote" >是</el-tag>
             <el-tag type="info" size="small" v-else >否</el-tag>
          </template>
        </el-table-column>
        <el-table-column  align="center" label="创建时间"  width="220px">
          <template slot-scope="scope">
            {{ scope.row.add_time | formateTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center" fixed="right">
            <el-button circle type="success"  size="small" icon="el-icon-edit" ></el-button>
            <el-button circle type="danger"  size="small" icon="el-icon-delete" ></el-button>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- page-size属性 是每页数量 -->
      <!-- current-pages属性 是当前页码 -->
      <!-- total 属性表示总数 -->
      <br>
      <Pageination @sizechange="sizeChange"
                  @pagechange="currentChange"
                  :total="total"
                  :pagenum="pagenum"
                  :pagesize="pagesize"></Pageination>

    </div>

  </el-card>
</template>

<script>
export default {
  name: 'Goods',
  data () {
    return {
      list: [],
      keywords: '',
      total: 0,
      pagenum: 1,
      pagesize: 10
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    // 获取商品列表
    async getGoodsList () {
      // 请求
      const { data: res } = await this.$axios.get('/goods', {
        params: {
          query: this.keywords,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      // 错误处理
      this.list = res.data.goods
      this.total = res.data.total
    },
    // 每页数量更换事件
    sizeChange (val) {
      this.pagesize = val
      this.pagenum = 1 // 每页数量更换的时候，让页面从头开始
      this.getGoodsList()
    },
    // 页码更换事件
    currentChange (val) {
      this.pagenum = val
      this.getGoodsList()
    },
    // 搜索查询事件
    submitGetList () {
      this.pagenum = 1
      this.pagesize = 10
      this.getGoodsList()
    }
  }
}
</script>

<style>

</style>
